<template>
  <div class="process">
    <div class="toper">
      <div class="head">
        <div class="title">简报制作</div>
        <div class="desc">半自动化生成或舆情分析报告<i></i></div>
      </div>
      <div class="liuchen">
          <div class="step">
            <step :data='2'></step>
          </div>
          <div class="right">
            <div class="num">
              <b>2</b>
              <div>当前素材数</div>
            </div>
            <div class="edit">
              <div class="generate">生成简报</div>
              <div class="choose">进入素材库</div>
            </div>
          </div>
      </div>
    </div>

    <div class="tab">
      <span class="active">素材库</span>
      <span>舆情列表</span>
      <span>全文搜索</span>
    </div>
    <div class="checkchose datePanel">
      <div class="condi">监测时间</div>
      <div class="time">
        <div class="body">
          <el-date-picker
          style="margin-right:0"
            v-model="timerange[0]"
            type="datetime"
            :picker-options="pickerBeginDateafter"
            placeholder="选择日期时间">
          </el-date-picker>
          <div class="gang"></div>
          <el-date-picker
            v-model="timerange[1]"
            type="datetime"
            :picker-options="pickerBeginDateBefore"
            placeholder="选择日期时间">
          </el-date-picker>
          <el-button @click="getmessage()">确定</el-button>
        </div>        
      </div>
      <div class="condi">筛选条件</div>
      <div class="screen">
          <div class="list" v-for="(item,windex) in condition.radiodata" :key="windex">
              <label>{{item.label}}</label>
              <div class="list-item">
                <span  v-for="(i,lindex) in item.item" :key="lindex" :class="{active:item.checked==i}"  @click="checkItem(item,lindex)">{{i}}</span>
              </div>
          </div>
      </div>
    </div>
    <div class="news">
      <div class="news-item active">
        全部(<span>512</span>)
      </div>
      <div class="news-item">
        新闻(<span>512</span>)
      </div>
      <div class="news-item">
        新闻(<span>512</span>)
      </div>
      <div class="news-item">
        新闻(<span>512</span>)
      </div>
      <div class="news-item">
        新闻(<span>512</span>)
      </div>
    </div>

    <div class="bodyer">
      <div class="handle">
        <el-checkbox class="checkbox" @change="checkAll()" v-model="checkAllFlag"></el-checkbox>
        <el-button class="right">批量加入</el-button>
      </div>
      <div class="news">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="checkbox">
            <el-checkbox></el-checkbox>
          </div>
          <div class="content">
            <div class="main">
              <div class="pic">
                <div class="img" v-bind:style="{backgroundImage:item.urlimg}"></div>
                <div class="label">{{item.webSite.substring(0,8)}}</div>
              </div>
              <div class="text">
                <div class="head">
                  <div class="title" v-html="filterHtml(item.title)"></div>
                  <div class="qx">倾向性: <TendLabel :tend="parseInt(item.positiveOrNegative)"></TendLabel></div>
                </div>
                <div class="body" v-html="filterHtml(item.content)"></div>
              </div>
            </div>
            <div class="imgbtns">
              <div class="imbtn del">删除</div>
            </div>
          </div>
          <div class="time">
            <div>{{item.poTime|fomartDate(item.poTime)}}</div>
            <div>{{item.poTime|fomartTime(item.poTime)}}</div>
          </div>
        </div>
      </div>
      <div class="pagination">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNum"
		      :page-sizes="[30, 50, 80, 100]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
    </div>
  </div>


</template> 
<script>
  import step from './step'
  // import DateShow from 'components/Home/DateShow'
  import moment from 'moment'
  let condition={
      id:'',
      startTime:moment().startOf('day'),
      endTime:moment(),
      websiteId:-1,
      radiodata:[
        {
          label: '时间排序',
          item: ['时间升序','时间降序'],
          checked:'时间升序'
        }]
}
  export default{
    name: 'chosematerial',
    components:{step},
    data(){
      return {
        condition,
        pageNum:1,//第几页
        pageSize:30,//条数
        checkAllFlag:false,
        list:[],
        total:0,
        pickerBeginDateBefore: {
          disabledDate: (time) => {
              let beginDateVal = this.timerange[0];
              if (beginDateVal) {
                  return time.getTime() < beginDateVal;
              }
          }
        },
        pickerBeginDateafter: {
          disabledDate: (time) => {
              let afterDateVal = this.timerange[1];
              if (afterDateVal) {
                  return time.getTime() > afterDateVal;
              }
          }
        },
        timerange:[moment().startOf('day'),moment()],


      }
    },
    methods:{
      checkItem(a,b){
        let ra=a.item[b]
        a.checked=ra
      },
      handleSizeChange(){

      },
      handleCurrentChange(){

      },
      async querymessage(){
        let ch4 = {'时间升序':['poTime','asc'],'时间降序':['poTime','desc'],'相关性排序':['_score','desc']}//时间排序3
        let res = await this.$http.POST('vrv-monitor-platform-web/user/log/page',{
            startTime:moment(this.condition.startTime).format('YYYY-MM-DD HH:mm:ss'),
            endTime:moment(this.condition.endTime).format('YYYY-MM-DD HH:mm:ss'),
            sortType:ch4[this.condition.radiodata[2].checked][1],
            currentPage:this.pageNum,
            limit:this.pageSize
        })
      this.total = res.body.totals
      let value = res.body.data
      this.list = (value[0] && value[0]['data']) ? value.map(d => d.data[0]) : value
      this.list.map((d)=>{
        this.$set(d,'checked', false )
        let imgurl = d.domain
        this.$http.get(`static/${imgurl}.png`).then(res=>{
          this.$set(d,'urlimg', `url(static/${imgurl}.png)` )
        }).catch(err=>{
          this.$set(d,'urlimg',"url('static/defult.png')")
        })
      })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .process
    background #f0f5fb 
  .toper
    padding 30px
    background #ffffff
    margin-bottom 8px
    .head
      font-size 0
      border-bottom 1px solid #dcdcdc
      height 38px
      box-sizing border-box
      >.title
        display inline-block
        width 100px
        vertical-align middle
        font-size 21px
        color #555555
      >.desc
        display inline-block
        font-size 14px
        color #999999
        vertical-align middle
        >i 
          display inline-block
          margin-left 8px
          width 14px
          height 14px
          background-image url('img/brief-why.png')
          background-repeat no-repeat
    .liuchen
      margin-top 45px
      display flex
      >.step
        flex 1
      >.right   
        width 260px
        >.num 
          text-align center
          float left
          >b
            color #e75a46
            font-size 40px
          >div
            font-size 18px
            color #333333
        >.edit
          float right 
          >div
            width 120px
            height 34px
            color #fff
            background-position 10% 55%
            font-size 12px
            line-height 34px
            text-indent 40px
            background-repeat no-repeat
            &.generate
              background-color #e85a47
              background-image url(img/generate.png)
              border-radius 8px
            &.choose
              background-color #e85a47
              background-image url(img/choose.png)
              border-radius 8px
              margin-top 10px

  .tab
    display flex
    padding-left 30px
    box-sizing border-box
    >span 
      width 120px
      height 40px
      box-sizing border-box
      text-align center
      border-top-left-radius 4px
      border-top-right-radius 4px
      background #fcfcfc
      line-height 40px
      margin-right 8px
      color #555555
      font-size 14px
      &.active  
        background #ffffff
        border 1px solid #dcdcdc
        color #ec6941
        font-weight bold
        border-bottom none

  .checkchose
    height 62px
    border-top 1px solid #dcdcdc
    border-bottom 1px solid #dcdcdc
    display flex
    background #ffffff
    >div
      &.screen
        flex 1
        padding-left 40px
        align-items center
        display flex
      &.time
        width 628px
        line-height 62px
        position relative
        >.body
          padding-left 20px
          position relative
      &.condi
        width 140px
        line-height 62px
        text-align 140px
        color #333333
        font-size 14px
        background #e5e5e5
        text-align center
    .gang
      display  inline-block
      width 15px
      height 3px
      background #898989
      margin 0 3px
    .list
      line-height 22px
      margin-right 40px
      >label
        font-size 12px
        color #333333
        padding 0
        display inline-block
        margin-right 10px
      .list-item
        color #999999
        font-size 0
        display inline-block
        >span 
          padding 0 8px
          height 22px
          line-height 22px
          font-size 12px
          display inline-block
          border-radius 3px
          margin-right 5px
          text-align center
          &.active
            color #ffffff
            background #e75a46
      &:nth-child(3n)
        margin-right 0
  .selecte
    height 34px
    line-height 34px
    padding 5px 0
    padding-left 40px
    display flex
    border-bottom 1px solid #dcdcdc
    background #eeeeee
    >div
      font-size 14px
      color #666666
      &:nth-child(1)
        margin-right 100px
    span 
      font-size 14px
      color #333333
      padding-right 15px
      background url(img/del.png) no-repeat right
      background-size 8px
      margin-right 84px
    a
      width 122px
      height 34px
      line-height 34px
      text-align center
      text-decoration none 
      color #026bd6
      font-size 14px
      border 1px solid #026bd6
      border-radius 4px
  .news
    border-bottom 1px solid #dcdcdc
    display flex
    font-size 14px
    >.news-item
      padding 0 30px
      height 50px
      box-sizing border-box
      line-height 50px
      text-align center
      border-right 1px solid #dcdcdc
      &.active
        background #e85a47
        color #ffffff
.bodyer
  >.title
    padding 20px 30px
    font-size 20px
    color #333
    box-sizing border-box
  >.handle
    height 50px
    line-height 50px
    background #f6f6f6
    padding-left 10px
    >.checkbox
      margin-right 40px
    >.right
      float right
      margin-right 50px
      margin-top 7px
  .news
    .item
      height 160px
      border 1px solid #dcdcdc
      display flex
      .checkbox
        width 70px
        padding-left 10px
        padding-top 10px
        box-sizing border-box
      .time
        width 150px
        >div
          text-align center
          color #333
          font-size 14px
          &:first-of-type
            margin-top 65px
      .content
        flex 1
        border-left 1px solid #dcdcdc
        border-right 1px solid #dcdcdc
        .main
          display flex
          height 120px
          .pic
            width 145px
            border-right 1px solid #dcdcdc
            text-align center
            >.img
              width 60px
              height 60px
              border 1px solid #dcdcdc
              border-radius 50%
              margin 5px auto
              margin-top 20px
              background-repeat no-repeat
              background-size 100%
          .text
            flex 1
            padding 15px 30px
            .head
              overflow hidden
              height 35px
              line-height 35px
              .title
                color #000
                float left
                font-size 0.88rem
              .qx
                float right
                color #666
            .body
              padding-top 0.8rem
              color #666
              font-size 0.88rem
              height 60px
              overflow hidden
              line-height 1.8rem
        .imgbtns
          height 40px
          border-top 1px solid #dcdcdc
          .imbtn
            float right
            height 30px
            line-height 30px
            margin-top 5px
            border-left 1px solid #dcdcdc
            padding  0 45px
            font-size 14px #666
            cursor pointer
            &.del
              background url(img/brief-del.png) no-repeat
              background-position 10% 50%
.pagination
  text-align right
  padding 0.93rem 0.93rem
</style>
